<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title th:text="${com.companyName}+'管理员添加物流专线'"></title>
    <!-- Bootstrap -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <form class="form-inline" action="/route_tianjia_after" method="post">
        <input name="companyId" th:value="${com.companyId}" hidden="hidden">
        <div class="container" style="padding-top: 20px">
            <div class="row form-group" style="padding-left: 20rem">
                <label for="routeCompany" style="padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    公司名称
                </label>
                <input readonly th:value="${com.companyName}" type="text" name="routeCompany" class="form-control" id="routeCompany" placeholder="请输入公司名称" style="width: 50rem">
            </div>
            <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
            <div class="row form-group" style="padding-left: 20rem">
                <label style="padding-right: 30px; display:inline;font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    出发地
                </label><br>
                <select style="width: 150px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="routeResourceProvince" id="province1">
                    <option>请选择</option>
                </select>
                <select style="width: 150px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="routeResourceCity" id="city1">
                    <option>请选择</option>
                </select>
                <select style="width: 150px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="routeResourceCountry" id="country1">
                    <option>请选择</option>
                </select>
            </div><br><br>
            <div class="row form-group" style="padding-left: 20rem">
                <label for="routeResourceAddress" style="margin-right:42px; padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    出发地址
                </label>
                <input type="text" name="routeResourceAddress" class="form-control" id="routeResourceAddress" placeholder="请输入出发地址" style="width: 150px">
            </div><br>
            <div class="row form-group" style="padding-left: 20rem; margin-top: 20px">
                <label for="routeResourcePerson" style="margin-right:15px; padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    出发地联系人
                </label>
                <input type="text" name="routeResourcePerson" class="form-control" id="routeResourcePerson" placeholder="请输入出发地联系人" style="width: 150px">
            </div><br>
            <div class="row form-group" style="padding-left: 20rem; margin-top: 20px">
                <label for="routeResourcePersonPhone" style="padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    出发地联系方式
                </label>
                <input type="text" name="routeResourcePersonPhone" class="form-control" id="routeResourcePersonPhone" placeholder="请输入出发地联系方式" style="width: 150px">
            </div>
            <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
            <div class="row form-group" style="padding-left: 20rem">
                <label style="padding-right: 30px; display:inline;font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    到达地
                </label><br>
                <select style="width: 150px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="routeDestinationProvince" id="province2">
                    <option>请选择</option>
                </select>
                <select style="width: 150px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="routeDestinationCity" id="city2">
                    <option>请选择</option>
                </select>
                <select style="width: 150px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="routeDestinationCountry" id="country2">
                    <option>请选择</option>
                </select>
            </div><br><br>
            <div class="row form-group" style="padding-left: 20rem">
                <label for="routeDestinationAddress" style="margin-right:42px; padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    到达地址
                </label>
                <input type="text" name="routeDestinationAddress" class="form-control" id="routeDestinationAddress" placeholder="请输入到达地址" style="width: 150px">
            </div><br>
            <div class="row form-group" style="padding-left: 20rem; margin-top: 20px">
                <label for="routeDestinationPerson" style="margin-right:15px; padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    到达地联系人
                </label>
                <input type="text" name="routeDestinationPerson" class="form-control" id="routeDestinationPerson" placeholder="请输入到达地联系人" style="width: 150px">
            </div><br>
            <div class="row form-group" style="padding-left: 20rem; margin-top: 20px">
                <label for="routeDestinationPersonPhone" style="padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    到达地联系方式
                </label>
                <input type="text" name="routeDestinationPersonPhone" class="form-control" id="routeDestinationPersonPhone" placeholder="请输入到达地联系方式" style="width: 150px">
            </div>
            <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
            <div class="row form-group" style="padding-left: 20rem">
                <label for="routePriceLight" style="padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    轻货价格
                </label>
                <input type="text" name="routePriceLight" class="form-control" id="routePriceLight" placeholder="请输入轻货价格" style="width: 50rem">
            </div>
            <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
            <div class="row form-group" style="padding-left: 20rem">
                <label for="routePriceHeavy" style="padding-right: 30px; font-weight: bold; font-family: 'Hiragino Sans GB', 'Microsoft Yahei UI', 'Microsoft Yahei', 微软雅黑, 'Segoe UI', Tahoma, 宋体b8b体, SimSun, sans-serif;">
                    重货价格
                </label>
                <input type="text" name="routePriceHeavy" class="form-control" id="routePriceHeavy" placeholder="请输入重货价格" style="width: 50rem">
            </div>
            <div class="row" style=" padding-top: 20px;padding-bottom: 20px"><hr style="background-color: aliceblue; height: 2px; margin: unset; border: unset"></div>
        </div>
        <div class="container">
            <div class="row text-center">
                <button type="submit" class="btn btn-primary" style="margin-right: 50px; width: 90px; margin-bottom: 40px">添加</button>
            </div>
        </div>

    </form>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="../jquery-3.3.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<script>
    //出发地
    $(function () {
        ProvinceBind1();

        $("#province1").change(function () {
            CityBind1();
        })

        $("#city1").change(function () {
            CountryBind1();
        })
    })
    function ProvinceBind1() {
        // $("#province1").html("");
        var str = "<option> 请选择省 </option>";
        $.ajax({
            url: "/getProvince",
            success: function (data) {
                $.each(data.data, function (i,item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                })
                $("#province1").append(str);
            },
            error: function () {
                alert("Error省");
            }
        })
    }

    function CityBind1() {
        $("#city1").html("");
        var options = $("#province1 option:selected");
        var province = options.val();//province为选中省份的cityName
        // alert(province);
        if (province == "")
            return ;
        $("#city1").html("");
        var str="<option> 请选择市 </option>";

        $.ajax({
            url: "/getCities",
            data: {"parentCity": province},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#city1").append(str);
            },
            error: function () {
                alert("Error市");
            }
        });
    }

    function CountryBind1() {
        $("#country1").html("");
        var options = $("#city1 option:selected");
        var city = options.val();
        if (city == "")
            return;
        $("#country1").html();
        var str="<option> 请选择县 </option>";

        $.ajax({
            url: "/getCountries",
            data: {"parentCity": city},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#country1").append(str);
            }
        });
    }

    //到达地
    $(function () {
        ProvinceBind2();

        $("#province2").change(function () {
            CityBind2();
        })

        $("#city2").change(function () {
            CountryBind2();
        })
    })
    function ProvinceBind2() {
        // $("#province1").html("");
        var str = "<option> 请选择省 </option>";
        $.ajax({
            url: "/getProvince",
            success: function (data) {
                $.each(data.data, function (i,item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                })
                $("#province2").append(str);
            },
            error: function () {
                alert("Error省");
            }
        })
    }

    function CityBind2() {
        $("#city2").html("");
        var options = $("#province2 option:selected");
        var province = options.val();//province为选中省份的cityName
        // alert(province);
        if (province == "")
            return ;
        $("#city2").html("");
        var str="<option> 请选择市 </option>";

        $.ajax({
            url: "/getCities",
            data: {"parentCity": province},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#city2").append(str);
            },
            error: function () {
                alert("Error市");
            }
        });
    }

    function CountryBind2() {
        $("#country2").html("");
        var options = $("#city2 option:selected");
        var city = options.val();
        if (city == "")
            return;
        $("#country2").html();
        var str="<option> 请选择县 </option>";

        $.ajax({
            url: "/getCountries",
            data: {"parentCity": city},
            success: function (data) {
                $.each(data.data, function (i, item) {
                    str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";
                });
                $("#country2").append(str);
            }
        });
    }
</script>
</body>
</html>
